<!DOCTYPE html>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@ page language="java" contentType="text/html;  charset=utf-8"
	pageEncoding="utf-8"%>
<html lang="ko">
	<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    
    <title>Faeple</title>
    <!--[if lt IE 9]>
		<script src="/resources/js/html5shiv.js"></script>
		<script src="/resources/js/respond.min.js"></script>
    <![endif]-->
    <style type="text/css">
		.arrow{ color: #ADADAD; margin-right: 6px; }
		.panel { border-radius:0!important; }
		.panel-heading { padding:0!important; }
		.accordion-toggle{ display: block; padding: 10px 15px; }
		.accordion-toggle:hover { text-decoration: none; font-weight: bold; }
		.panel-title{ text-decoration: none!important; }
    </style>
</head>

<body>
<div id="viewport">
<div id="page">
<!-- header -->
	<%@ include file="head.jsp" %>
<!-- header -->
<div class="container" style="margin-top:15px;">
	<h2>공지사항</h2>
</div>
<div class="container" style="padding-top:25px; min-height: 350px;">
	<div class="panel-group" id="notices">
		<div id="loadingAjaxImg" style="text-align:center; padding:25px 0; display: none;"><img src="/resources/img/loading-25x25-gray.gif" /></div>
	</div>
</div>

<!-- footer -->
<%-- <jsp:include page = "footer.jsp" flush="false"/> --%>
<!-- footer -->

</div><!-- end page -->
<%@ include file="commonScript.jsp" %>
</div><!-- end viewport -->
<script src="/resources/js/hangul.min.js"></script>
<script type="text/javascript">
   	$().ready(function(){
   		var mobile = location.href.split("?")[1];
   		if(typeof mobile != "undefined"){
   			if(mobile == "mobile"){
   				$(".header").hide();
   				$(".mobile-footer-menu").remove();
   	   			$("body").css("background-image","none");
   			}
   		}
		$.ajax({
			type : "get"
			, url : "/getNotices"
			, dataType : "json"
			, timeout : 5000
			, error : function(request, status, error) {
				//$("#notices").append("<h3></h3>");
			}
			, success : function(response) {
				var idx = response.length;
				for(var i=0;i<response.length;i++){
					var html =  "<div class='panel panel-default' id='panel"+idx+"'><div class='panel-heading'><a class='accordion-toggle panel-title' data-toggle='collapse' data-parent='#notices' href='#view"+idx+"'><i class='fa fa-chevron-right arrow'></i>"+response[i].title+"</a></div><div id='view"+idx+"' class='panel-collapse collapse'><div class='panel-body'>"+response[i].content.replace(/\n/g, "<br />")+"</div></div></div>";
					$("#notices").append(html);
					idx--;
				}
				$('.panel').on('show.bs.collapse', function (e) {
		   			$("#"+e.currentTarget.id).find(".panel-title").children("i").removeClass("fa-chevron-right").addClass("fa-chevron-down");
		   		}).on('hide.bs.collapse', function (e) {
		   			$("#"+e.currentTarget.id).find(".panel-title").children("i").removeClass("fa-chevron-down").addClass("fa-chevron-right");
		   		});
				
				if(typeof location.href.split("=")[1] != undefined){
					$("#view"+location.href.split("=")[1]).collapse("show");
				}
			}
			, beforeSend: function() {
				$("#loadingAjaxImg").show();
			}
			, complete: function() {
				$("#loadingAjaxImg").hide();
			}
		});
	});
</script>
</body>
</html>